<!doctype html>
{% load static %}
<html lang="en">

<head>
  <title>软件工程课程实训案例</title>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta content="width=device-width, initial-scale=1.0" name="viewport" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <!--     Fonts and icons     -->
  <!-- <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Roboto+Slab:400,700|Material+Icons" /> -->
  <!-- 因为google访问不稳定，换为本地已下载好的文件-->
  <link rel="stylesheet" type="text/css" href="{% static 'assets/material_icons.css' %}" />
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css">
  <!-- Material Kit CSS -->
  <link href="{% static 'assets/css/material-dashboard.css' %}" rel="stylesheet" />

  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
  <!-- CSS Just for demo purpose, don't include it in your project -->
  <link href="{% static 'assets/demo/demo.css' %}" rel="stylesheet" />
  <style>
  /* Make the image fully responsive */
  
  .card {
    margin-top: 20px;
    margin-bottom: 10px;
  }

  .tsinghua-color {
    color: #9c27b0;
  }

  .form-group{
    margin: 0px 0 0;
  }

  .fellow-travelers-number {
    width: 35%;
  }

  .fellow-travelers-info {
    width: 65%;
  }

  .fellow-travelers-info input{
    border: 0px solid;
  }


  </style>

</head>

<body>
  <div class="wrapper">

    <div class="row">
      <div class="col-lg-12 col-md-12 col-sm-12">
        <h4 class="card-title text-center" style="margin-bottom:0px; margin-top:15px;">实名认证</h4>
      </div>

    </div>

    
    <div class="row" style='margin-top:50px;margin-bottom:20px;'>
      <img src="{% static 'assets/img/tsinghua-logo.png' %}" class= 'm-auto' style='width:50%;'>
    </div>

    <div class="main-panel m-auto" style="float:none;">
      <!-- End Navbar -->
      <div class="content" style="margin-top:-30px;">
        <div class="container-fluid">
          <!-- your content here -->

          <div class="card">

            <div class="card-body"  style="margin-top:-10px;">
              
                

                
                  
                <div class="row">
                  <div class="fellow-travelers-number m-auto">
                    <i class="material-icons tsinghua-color align-middle">bubble_chart</i>
                    <span class="align-middle">证件类型</span>
                  </div>
                  <div class="fellow-travelers-info">
                    <div class="form-group" style=''>
                      <span class=''>居民身份证</span>
                    </div>
                  </div>
                </div>

                <div class="row">
                  <div class="fellow-travelers-number m-auto">
                    <i class="material-icons tsinghua-color align-middle">face</i>
                    <span class="align-middle">认证类型</span>
                  </div>
                  <div class="fellow-travelers-info">
                    <div class="form-group" style=''>
                      <span class=''>人脸识别</span>
                    </div>
                  </div>
                </div>

                <div class="row">
                  <div class="fellow-travelers-number m-auto">
                    <i class="material-icons tsinghua-color align-middle">person</i>
                    <span class='align-middle'>您的姓名</span>
                  </div>
                  <div class="fellow-travelers-info">
                    <div class="form-group" style=''>
                      <input type="text" class="form-control" placeholder="必填" id = 'username'>
                    </div>
                  </div>
                </div>

                <div class="row">
                  <div class="fellow-travelers-number m-auto">
                    <i class="material-icons tsinghua-color align-middle">content_paste</i>
                    <span class='align-middle'>证件号码</span>
                  </div>
                  <div class="fellow-travelers-info">
                    <div class="form-group" style=''>
                      <input type="text" class="form-control" placeholder="必填" id = 'id_card'>
                    </div>
                  </div>
                </div>

                <div class="row">
                    <div class="col-12">
                       <p class="card-category" style='maring-top: 5px;'>入校时需出示居民身份证原件</p>
                       <p class="card-category" style='margin-top:-10px;margin-bottom:0px;'>请确认证件与本人一致、证件号码准确，否则无法入校参观</p>
                    </div>
                    
                </div>
          
            </div>
            
          </div>
          <button type="submit" class="btn btn-primary" style='width:100%;height: 45px;' id = 'save_user_info'>认证登录</button>
            <input type="hidden" id ='from_page' value="{{ from_page }}"/>
        </div>
      </div>
    </div>
  </div>
</body>
<!--   Core JS Files   -->
<script src="{% static 'assets/js/core/jquery.min.js' %}"></script>
<script>
    $("#save_user_info").click(function(){

        // TODO 此处省略了身份认证的代码

        var data = {}
        data['username'] = $("#username").val();
        data['id_card']  = $("#id_card").val();

        console.log(data)

        $.ajax({
            type:"POST",
            url:"/userweb/save_user_info",
            data: data,
            datatype:"json",
            success: function(ret){
                console.log(ret)
                if(ret.code == 0){
                    var r=confirm("认证成功，点击确认，前往预约");
                    if (r==true){
                        if($('#from_page').val() == 'mybookinghistory'){
                            window.location.href='/userweb/my_booking_history';
                        }
                        else{
                            window.location.href='/userweb/booking';
                        }

                    }else{
                        return false;
                    }
                }
                else{
                    var r=alert("有选项未填");
                }
            },
            //调用出错执行的函数
            error: function(){
                //请求出错处理
            }
        })
    });
</script>

</html>